<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%--<%--%>
<%--    String path = request.getContextPath();--%>
<%--    System.out.println("getContextPath="+path);--%>
<%--    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";--%>
<%--%>--%>
<head>
    <%--引用在线layui--%>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>

    <title></title>
</head>

<body>

<div align="center" style="margin-top:-100px">
    <video id="video" width="800px" height="700px" autoplay></video>
    <canvas hidden="hidden" id="canvas" width="626" height="800"></canvas>
</div>
<p align="center" style="margin-top: -20px">
    <button class="layui-btn layui-btn-primary layui-border-black" id="open">开启摄像头</button>
    <button class="layui-btn layui-btn-primary layui-border-black"  id="close">关闭摄像头</button>
    <button class="layui-btn layui-btn-primary layui-border-black"   id="CatchCode">开始验证</button>
</p>
</body>
<script>

    layui.use(['form','jquery'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer;

            var video;//视频流对象
            var context;//绘制对象
            var canvas;//画布对象

            var flag = false;

            window.onload = function () {
                //调用摄像头初始化
                open();
                flag = true;
            }

            $(function () {

                $("#indexbtn").click(function () {
                    //window.parent.location.href="${basePath}home.jsp";
                })

                //开启摄像头
                $("#open").click(function () {
                    //判断摄像头是否打开
                    if (!flag) {
                        //调用摄像头初始化
                        open();
                        flag = true;
                    }
                });
                //关闭摄像头
                $("#close").click(function () {
                    //判断摄像头是否打开
                    if (flag) {
                        video.srcObject.getTracks()[0].stop();
                        flag = false;
                    }
                });
                //拍照
                $("#CatchCode").click(function () {
                    if (flag) {
                        context.drawImage(video, 0, 0, 330, 250);
                        CatchCode();
                    } else
                        layer.msg("请先开启摄像头!", {icon: 5});
                });
            });

            //开启摄像头
            function open() {
                //获取摄像头对象
                canvas = document.getElementById("canvas");
                context = canvas.getContext("2d");
                //获取视频流
                video = document.getElementById("video");
                var videoObj = {
                    "video": true
                }, errBack = function (error) {
                    console.log("Video capture error: ", error.code);
                };
                context.drawImage(video, 0, 0, 330, 250);
                //初始化摄像头参数
                if (navigator.getUserMedia || navigator.webkitGetUserMedia
                    || navigator.mozGetUserMedia) {
                    navigator.getUserMedia = navigator.getUserMedia
                        || navigator.webkitGetUserMedia
                        || navigator.mozGetUserMedia;
                    navigator.getUserMedia(videoObj, function (stream) {
                        video.srcObject = stream;
                        video.play();
                    }, errBack);
                }
            }

            //将摄像头拍取的图片转换为Base64格式字符串
            function getBase64() {
                //获取当前图像并转换为Base64的字符串
                var imgSrc = canvas.toDataURL("image/png");
                //截取字符串
                return imgSrc.substring(22);
            };

            //将当前图像传输到后台
            function CatchCode() {
                //获取图像
                var img = getBase64();
                //Ajax将Base64字符串传输到后台处理
                $.ajax({
                    type : "POST",
                    url : "http://localhost:8080/t163jspall_war_exploded/searchFace",
                    data : {
                        img : img
                    },
                    dataType : "JSON",
                    success : function(data) {
                        console.log(data)
                        //返回的结果
                        if (data.result==null){
                            layer.msg("当前无法检测到人脸!", {icon: 5});
                            return;
                        }
                        //取出对比结果的返回分数，如果分数90以上就判断识别成功了
                        if(parseInt(data.result.user_list[0].score) >=0) {
                            //关闭摄像头
                            video.srcObject.getTracks()[0].stop();

                            //提醒用户识别成功
                            //验证成功跳转页面
                            layer.alert("欢迎",{icon:6},function () {
                                //父窗口跳转
                                window.parent.location.href="${pageContext.request.contextPath}/t163demo/t163.jsp";
                                //关闭窗口
                                parent.layer.close(index);
                            });
                            setTimeout(function () {
                            },1500)
                        }else {

                            layer.msg("验证失败人脸库暂无人脸!", {icon: 5});
                        }
                    },
                    error : function(q, w, e) {
                        alert(q + w + e);
                    }
                });
            };
        }
    );
</script>
</html>